<template>
  <div class="pledge-record">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div class="pledge-head">
        <span class="head-head">质押时间</span>
        <span class="head-body">质押数量</span>
        <span class="head-foot">数量</span>
      </div>
      <div class="pledge-body" v-for="(item, index) in pledgeLogList" :key="index">
        <span class="body-content1">{{ item.add_time }}</span>
        <div class="body-content2">
          <div class="content2-head">{{ item.pledge_gbt }}AVM</div>
          <div class="content2-body">
            <div :style="`width: ${ sliceDecimal(Number(item.release_usdt) / Number(item.all_pledge_usdt),3)}%`"
                 class="body-inner"></div>
          </div>
          <div class="content2-foot">{{ sliceDecimal(Number(item.release_usdt) / Number(item.all_pledge_usdt),3) }}%</div>
        </div>
        <span class="body-content3" @click="openPledge(item.id)">立即释放</span>
      </div>
    </van-list>
    <!--    立即解押弹窗-->
    <van-popup v-model:show="isPledgeShow">
      <div class="notReachedAccount-box">
        <div class="notReachedAccount-title">立即解押</div>
        <div class="notReachedAccount-title1">30天内解押扣20%，60天内解押扣10%，90
          天内解押扣5%，超过90天不扣手续费
        </div>
        <div class="notReachedAccount-btn">
          <div class="btn-left" @click="isPledgeShow = false">取消</div>
          <div class="btn-line"></div>
          <div class="btn-right" @click="onSubmitPledge">确定解押</div>
        </div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isPledgeShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import {ref} from "vue";
import req from '@/libs/req';
import {showSuccessToast} from "vant";
import {sliceDecimal} from '@/libs/utlis';

let pageNum = 1;
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const pledgeLogList = ref([]);
const isPledgeShow = ref(false);
const checkoutId = ref('');

// 点击确定解押
const onSubmitPledge = async () => {
  const res = await req.post('Pledge/separatePledge', {
    pledge_id: checkoutId.value
  })
  if (res.length === 0) {
    isPledgeShow.value = false;
    showSuccessToast('解押成功');
    checkoutId.value = '';
    pledgeLogList.value = [];
    pageNum = 1;
    await onLoad();
  }
}
// 点击立即解押
const openPledge = (id) => {
  isPledgeShow.value = true;
  checkoutId.value = id;
}
// 获取质押列表
const onLoad = async () => {
  const res = await req.post('Pledge/pledge_log', {
    page_no: pageNum,
    page_size: 5
  });
  pledgeLogList.value.push(...res.list);
  pageNum++;
  // 加载状态结束
  loading.value = false;
  if (pledgeLogList.value.length >= res.count) {
    finished.value = true;
  }
};
</script>
<style scoped lang="scss">
.pledge-record {
  position: relative;
  min-height: 100vh;
  padding: 32px 15px 25px;

  .pledge-head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #F7AC15;
    margin-bottom: 7px;
    padding: 16px 15px;
    background-color: #212020;
    z-index: 9999;

    .head-head {
      margin-left: 9px;
    }

    .head-body {
      margin-left: 20px;
    }

    .head-foot {
      margin-right: 20px;
    }
  }

  .pledge-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;

    .body-content1 {
      font-size: 14px;
      color: #F6F6F6;
    }

    .body-content2 {
      display: flex;
      flex-direction: column;

      .content2-head {
        font-size: 14px;
        color: #F6F6F6;
      }

      .content2-body {
        position: relative;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background-color: #aaaaaa;
        margin: 2px 0;

        .body-inner {
          position: absolute;
          left: 0;
          top: 0;
          height: 4px;
          border-radius: 2px;
          background-color: #F7AC15;
        }
      }

      .content2-foot {
        font-size: 12px;
        color: #F7AC15;
        text-align: center;
      }
    }

    .body-content3 {
      font-size: 12px;
      color: #000;
      padding: 6px 10px;
      text-align: center;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
    }
  }

  .notReachedAccount-box {
    width: 90vw;
    position: relative;
    padding: 28px 23px 0;
    font-size: 15px;
    color: #f6f6f6;

    svg {
      position: absolute;
      top: 12px;
      right: 15px;
    }

    .notReachedAccount-title {
      font-size: 18px;
      text-align: center;
      margin-bottom: 47px;
    }

    .notReachedAccount-title1 {
      font-size: 15px;
      color: #F6F6F6;
      line-height: 24px;
      margin-bottom: 48px;
    }

    .notReachedAccount-btn {
      font-size: 14px;
      color: #F7AC15;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-top: 1px solid #0FC59D;
      padding: 10px 0;

      .btn-line {
        width: 1px;
        height: 35px;
        background-color: #0FC59D;
      }

      .btn-left,
      .btn-right {
        width: 48%;
        text-align: center;
      }
    }
  }
}

:deep(.van-popup--center) {
  background: #000000;
  border: 1px solid #13F6C4;
  border-radius: 10px;
}
</style>
